import React, { PureComponent } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import PropTypes from 'prop-types';
import { adapt, statusBarHeight } from '~/utils/ScreenAdapter';
import { DefaultStyles } from '~/styles/GlobalStyles';
import { withNavigation } from 'react-navigation';

const BackIcon = require('../../assets/icon/icon_navbar_back.png');
const CloseIcon = require('../../assets/icon/icon_navbar_close.png');
const BackIcon2 = require('../../assets/icon/icon_navbar_back2.png');

const propTypes = {
  title: PropTypes.string.isRequired,
  backIconType: PropTypes.string,
  rightComponent: PropTypes.element,
  onRightPress: PropTypes.func,
  onLeftPress: PropTypes.func,
  hasShadow: PropTypes.bool,
  hideLeftIcon: PropTypes.bool,
  color: PropTypes.string,
  titleColor: PropTypes.string,
};

const defaultProps = {
  backIconType: 'back',
  rightComponent: null,
  onRightPress: e => null,
  onLeftPress: null,
  hasShadow: false,
  hideLeftIcon: false,
  color: DefaultStyles.White,
  titleColor: DefaultStyles.Black84,
};

@withNavigation
class NavBar extends PureComponent {
  static propTypes = propTypes;

  static defaultProps = defaultProps;

  constructor(props) {
    super(props);
  }

  componentDidMount() {}

  onLeftPress = () => {
    const { onLeftPress } = this.props;
    if (onLeftPress) {
      onLeftPress();
      return;
    }
    const { goBack } = this.props.navigation;
    console.log(goBack);
    goBack();
  };

  render() {
    const { title, hasShadow, color, titleColor } = this.props;

    return (
      <View
        style={[
          styles.navBarContainer,
          { backgroundColor: color },
          hasShadow && { ...DefaultStyles.Shadow },
        ]}
      >
        <View style={styles.statusBarPlaceHolder} />
        <View style={styles.barContainer}>
          {this.renderLeft()}
          <Text style={[styles.titleText, { color: titleColor }]}>{title}</Text>
          {this.renderRight()}
        </View>
      </View>
    );
  }

  renderLeft = () => {
    const { backIconType, hideLeftIcon } = this.props;

    if (hideLeftIcon) {
      return <View style={styles.leftButton} />;
    }

    return (
      <TouchableOpacity onPress={this.onLeftPress} style={styles.leftButton}>
        <Image
          style={styles.leftIcon}
          source={
            backIconType === 'back'
              ? BackIcon
              : backIconType === 'backWhite'
              ? BackIcon2
              : CloseIcon
          }
        />
      </TouchableOpacity>
    );
  };

  renderRight = () => {
    const { rightComponent, onRightPress } = this.props;

    if (!rightComponent) {
      return <View style={styles.rightButton} />;
    }
    return (
      <TouchableOpacity onPress={onRightPress} style={styles.rightButton}>
        {rightComponent}
      </TouchableOpacity>
    );
  };
}

const styles = StyleSheet.create({
  navBarContainer: {
    width: '100%',
    height: adapt(44) + statusBarHeight,
    flexDirection: 'column',
  },
  statusBarPlaceHolder: {
    width: '100%',
    height: statusBarHeight,
  },
  barContainer: {
    width: '100%',
    height: adapt(44),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: adapt(16),
  },
  titleText: {
    ...DefaultStyles.Medium,
    fontSize: 18,
  },
  leftButton: {
    flexDirection: 'row',
    alignItems: 'center',
    height: adapt(44),
    width: adapt(100),
    justifyContent: 'flex-start',
  },
  rightButton: {
    flexDirection: 'row',
    alignItems: 'center',
    height: adapt(44),
    width: adapt(100),
    justifyContent: 'flex-end',
  },
  leftIcon: {
    width: 24,
    height: 24,
  },
});

export default NavBar;
